import { SchemaManage } from '@/components/SchemaComponent';
import React, { useContext, useEffect, useMemo, useState } from 'react';
import { ConditionManageAPI } from '../common/type';
import { ConditionManageContext, getTableColumns } from '../mconfig';
import { PlusOutlined } from '@ant-design/icons';
import { UpdateConditionModal } from './UpdateConditionModal';

export const ManageRightTableView: React.FC<
  ConditionManageAPI.IManageTableView
> = ({ searchRenderID }) => {
  const designManageTableRef: any = React.useRef();

  /**
   * 获取上下文
   */
  const {
    rightTableProps: {
      dataSource,
      loading,
      getConditionTableData,
      pagination,
      otherParams,
      searchList,
    },
    leftSelectKeys,
    curRes,
    typeSelectRow,
  } = useContext(ConditionManageContext);

  /**
   * 是否打开新增弹框
   */
  const [updateTableModal, setUpdateTableModal] = useState<any>({
    isShowModal: false,
    checkRowObj: {},
  });

  /**
   * 表格默认 参数
   */
  const tableParams = useMemo(() => {
    return {
      orderType: typeSelectRow?.orderType,
      tableName: typeSelectRow?.tableName,
      dicTypeIds: typeSelectRow?.orderType?.substring(0, 8),
    };
  }, [typeSelectRow]);

  /**
   * 监听 左侧树节点选中 改变
   */
  useEffect(() => {
    if (leftSelectKeys && leftSelectKeys?.length > 0) {
      let tablePayload = {
        ...otherParams,
        ...tableParams,
      };
      getConditionTableData({ ...tablePayload });
    }
  }, [leftSelectKeys]);

  /** 切换方法 */
  const onSwitch = (
    key: string | undefined | number,
    searchValues: any,
    params: any,
  ) => {
    if (key) {
      getConditionTableData({ ...params, ...searchValues });
    }
  };

  /**
   * 重置搜索表单方法
   */
  const onReset = (values: any) => {
    getConditionTableData({ ...tableParams, ...values });
  };

  /**
   * 搜索列表
   */
  const onSearch = (request: ConditionManageAPI.IGridRequestType) => {
    getConditionTableData({ ...otherParams, ...request });
  };

  /**
   * 分页change 方法
   */
  const onPageChange = (current: any, pageSize: any, params: any) => {
    getConditionTableData({ ...otherParams, pageSize, current, ...params });
  };

  /**
   * 表格操作按钮点击方法
   */
  const onOptClick: ConditionManageAPI.IOperationClick = {
    onEdit: (resObj: Record<string, any>) => {
      setUpdateTableModal({
        isShowModal: true,
        checkRowObj: resObj,
      });
    },
  };

  /** 管理页面头部操作集合 */
  const tableActionList: ConditionManageAPI.IHeaderActionType = useMemo(() => {
    return [
      {
        title: '添加',
        visible: curRes?.['/activitiController/addCondition'] ?? false,
        type: 'primary',
        icon: <PlusOutlined />,
        onClick: () => {
          setUpdateTableModal({
            isShowModal: true,
            checkRowObj: {},
          });
        },
      },
    ];
  }, [curRes]);

  /**
   * 获取columns方法
   */
  const columns: Record<string, any>[] = React.useMemo(() => {
    return getTableColumns(curRes, onOptClick);
  }, [curRes]);

  return (
    <>
      <SchemaManage
        ref={designManageTableRef}
        searchProps={{
          switchList: [], //头部切换列表
          searchList, //搜索表单列表
          onReset, //重置
          onSwitch, //头部切换
          onSearch, //搜索方法
        }}
        actionList={tableActionList} //Table头部操作按钮列表
        searchDrawerRender={searchRenderID}
        tableProps={{
          // table 表格属性
          columns,
          dataSource,
          loading,
          pagination: pagination as any,
          rowKey: 'id',
          onPageChange, //分页change方法
        }}
      />

      {updateTableModal?.isShowModal && (
        <UpdateConditionModal
          visible={updateTableModal?.isShowModal}
          onClose={() => {
            setUpdateTableModal({
              isShowModal: false,
              checkRowObj: {},
            });
          }}
          checkRowObj={updateTableModal?.checkRowObj}
        />
      )}
    </>
  );
};
